<template>
  <div>
    <header>
      <h1>中国移动权益超市</h1>
      <div class="box">
        <span class="iconfont icon-sousuo"></span>
        <span class="iconfont icon-xinxi"></span>
      </div>
    </header>
    <zhanglun />
    <main>
      <div class="big-box">
        <div class="small-box">
          <img src="img/zhangimg/quanyi/9.gif" alt="" />
          <span>升级黄金会员预计可省￥750</span>
          <p>1元升级会员</p>
        </div>
        <div class="small-box-1">
          <img src="img/zhangimg/quanyi/10.gif" alt="" />
          <img src="img/zhangimg/quanyi/11.gif" alt="" />
          <img src="img/zhangimg/quanyi/12.gif" alt="" />
          <img src="img/zhangimg/quanyi/13.gif" alt="" />
        </div>
        <div class="small-box-1">
          <img src="img/zhangimg/quanyi/14.gif" alt="" />
          <img src="img/zhangimg/quanyi/15.gif" alt="" />
          <router-link to="/chanpin"
            ><img src="img/zhangimg/quanyi/16.gif" alt=""
          /></router-link>
          <router-link to="/chanpin"
            ><img src="img/zhangimg/quanyi/17.gif" alt=""
          /></router-link>
        </div>
      </div>
    </main>
    <div class="sou">
      <span class="iconfont icon-sousuo"></span>
      <input type="text" />
      <button>搜索</button>
    </div>
    <div class="caidan">
      <div class="big-box">
        <div class="box">
          <span class="iconfont icon-weinituijian"></span>
        </div>
        <p>本月推荐</p>
        <b>享受生活</b>
      </div>
      <router-link to="/tesequanyi">
        <div class="big-box">
          <div class="box">
            <span class="iconfont icon-quanyishouze"></span>
          </div>
          <p>特色权益</p>
          <b>5g+15GB</b>
        </div>
      </router-link>
      <div class="big-box">
        <div class="box">
          <span
            class="iconfont icon-a-dingzhiyemiantubiaochengren-fuben-49"
          ></span>
        </div>
        <p>本地特色</p>
        <b>吃喝玩乐</b>
      </div>
      <div class="big-box">
        <div class="box">
          <span class="iconfont icon-yingyinyule"></span>
        </div>
        <p>影音娱乐</p>
        <b>热门好剧</b>
      </div>
      <div class="big-box">
        <div class="box">
          <router-link to="/jifenzhuanqu"
            ><span class="iconfont icon-e634"></span
          ></router-link>
        </div>
        <p>积分专区</p>
        <b>越购越划算</b>
      </div>
      <div class="big-box">
        <div class="box">
          <span class="iconfont icon-xinyika"></span>
        </div>
        <p>权益心意卡</p>
        <b>礼赠他人</b>
      </div>
      <div class="big-box">
        <div class="box">
          <span class="iconfont icon-JD"></span>
        </div>
        <p>京东好物</p>
        <b>每日秒杀</b>
      </div>
      <div class="big-box">
        <div class="box">
          <span class="iconfont icon-remenshouji"></span>
        </div>
        <p>本月推荐</p>
        <b>享受生活</b>
      </div>
    </div>
    <zhanglun2 />
    <nav>
      <ul>
        <li>
          <p>推荐</p>
          <b class="tuchu">猜你喜欢</b>
        </li>
        <li>
          <p class="yangqi">会员</p>
          <b>专属折扣</b>
        </li>
        <li>
          <p>人气</p>
          <b>大家都在买</b>
        </li>
        <li>
          <p>特惠</p>
          <b>流量+会员</b>
        </li>
        <li>
          <p>新品</p>
          <b>上新了</b>
        </li>
      </ul>
    </nav>
    <div class="banner">
      <img src="img/zhangimg/quanyi/22.gif" alt="" />
      <div class="banner2">
        <img src="img/zhangimg/quanyi/23.gif" alt="" />
        <img src="img/zhangimg/quanyi/24.gif" alt="" />
      </div>
      <div class="banner3">
        <img src="img/zhangimg/quanyi/25.gif" alt="" />
        <img src="img/zhangimg/quanyi/26.gif" alt="" />
      </div>
    </div>
    <div class="tupian">
      <div class="box">
        <img src="img/zhangimg/quanyi/27.gif" alt="" />
        <img src="img/zhangimg/quanyi/30.gif" alt="" />
      </div>
      <div class="box">
        <img src="img/zhangimg/quanyi/28.gif" alt="" />
        <img src="img/zhangimg/quanyi/31.gif" alt="" />
      </div>
      <div class="box">
        <img src="img/zhangimg/quanyi/29.gif" alt="" />
        <img src="img/zhangimg/quanyi/32.gif" alt="" />
      </div>
    </div>
    <zhangge />
    <div class="tu">
      <img src="img/zhangimg/quanyi/42.gif" alt="" />
    </div>
    <footer>—我是有底线的—</footer>
    <div class="footer"></div>
    <Bottom />
  </div>
</template>

<script>
import zhanglun from "@/components/zhang/zhanglun.vue";
import Zhanglun2 from "@/components/zhang/zhanglun2.vue";
import Zhangge from "@/components/zhang/zhangge.vue";

export default {
  components: {
    zhanglun,
    Zhanglun2,
    Zhangge,
  },
};
</script>

<style>
header {
  width: 100%;
  height: 0.48rem;
  background-color: aqua;
  line-height: 0.48rem;
  display: flex;
  justify-content: space-between;
}
h1 {
  font-size: 0.2rem;
  font-weight: 900;
  margin-left: 1rem;
}
header.box {
  height: 0.48rem;
  /* background-color: blue; */
  float: right;
}
header .box span {
  font-size: 0.22rem;
  margin-right: 0.15rem;
}
main .big-box {
  width: 3.6rem;
  height: 1.83rem;
  background: linear-gradient(to right, #face52, #fedc77, #ffe59a);
  margin-left: 0.14rem;
  border-radius: 20px;
  position: absolute;
  top: 2.3rem;
  left: 0;
}
main .big-box .small-box {
  width: 100%;
  height: 0.6rem;
  padding-top: 0.2rem;
}
main .big-box .small-box img {
  width: 0.3rem;
  float: left;
  margin-left: 0.12rem;
}
main .big-box .small-box span {
  display: block;
  height: 0.4rem;
  font-size: 0.14rem;
  font-weight: 900;
  line-height: 0.4rem;
  float: left;
  margin-left: 0.08rem;
}
main .big-box .small-box p {
  margin-top: 0.08rem;
  font-size: 0.12rem;
  height: 0.24rem;
  line-height: 0.24rem;
  border-radius: 10px 0 0 10px;
  float: right;
  background: #c7ab7d;
  color: white;
  font-weight: 900;
}
main .big-box .small-box-1 {
  text-align: center;
}
.big-box .small-box-1 img {
  width: 0.83rem;
  height: 0.57rem;
}
.sou {
  width: 3.6rem;
  height: 0.38rem;
  border: 3px solid skyblue;
  margin-top: 1.61rem;
  margin-left: 0.14rem;
  border-radius: 0.5rem;
  display: flex;
}
.sou span {
  display: block;
  width: 0.46rem;
  height: 0.38rem;
  line-height: 0.38rem;
  text-align: center;
}
.sou input {
  width: 2.5rem;
}
.sou button {
  width: 0.59rem;
  height: 0.32rem;
  border-radius: 50px;
  background: #57c1fd;
  color: white;
  border: 1px solid #57c1fd;
}
.caidan {
  /* width: 3.6rem; */
  height: 1.02rem;
  background-color: aqua;
  margin-left: 0.14rem;
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
  flex: 1;
  overflow: auto;
}
.caidan .big-box {
  width: 0.92rem;
  height: 1.02rem;
  padding-left: 0px;
  flex-shrink: 0;
  text-align: center;
  margin-top: 0.3rem;
}
.caidan .big-box .box {
  width: 0.43rem;
  height: 0.43rem;
  background: #fedfda;
  line-height: 0.43rem;
  margin-left: 0.25rem;
}
.caidan span {
  font-size: 0.27rem;
  margin-left: 0.02rem;
}
.caidan .big-box b {
  font-size: 0.1rem;
  color: #a0a0a0;
}
nav {
  width: 3.6rem;
  height: 0.37rem;
}
nav ul {
  position: absolute;
  top: 7rem;
  left: 0;
  flex: 1;
  display: flex;
  overflow: auto;
}
nav ul li {
  color: black;
  flex-shrink: 0;
  text-align: center;
}
nav ul li p {
  font-weight: 900;
}
nav ul li b {
  font-size: 9px;
  color: #b9b9b9;
}
nav ul li .yangqi {
  color: #fc4208;
}
nav ul li .tuchu {
  display: block;
  width: 0.6rem;
  height: 0.2rem;
  background: #ff2829;
  border-radius: 50px;
  line-height: 0.2rem;
  margin-top: 0.02rem;
  color: white;
}
.banner {
  width: 3.6rem;
  height: 1.94rem;
  margin-left: 0.14rem;
  display: flex;
  margin-top: -0.4rem;
}
.banner img {
  width: 1.2rem;
}
.banner .banner2 {
  margin-left: 0.07rem;
}
.banner .banner3 {
  margin-left: 0.07rem;
}
.banner .banner3 img {
  height: 0.95rem;
}
.banner .banner2 img {
  height: 0.95rem;
}
.tupian {
  width: 3.6rem;
  height: 1.96rem;
  margin-left: 0.14rem;
  margin-top: 0.2rem;
  display: flex;
}
.tupian img {
  width: 1.09rem;
  height: 0.96rem;
}
.tu {
  width: 3.6rem;
  height: 1.46rem;
  margin-left: 0.14rem;
}
footer {
  width: 3.6rem;
  height: 0.62rem;
  margin-left: 0.14rem;
  text-align: center;
  line-height: 0.62rem;
}
.footer {
  height: 1rem;
}
</style>